<template>
  <div class="order-list">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/orders' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
     <el-input placeholder="请输入内容" v-model="searchVal" class="search-input" @keydown.enter.native="searchOrder" style="width: 50%"></el-input>
     <el-button>测试订单</el-button>
       <!-- 列表 -->
  <el-table   :data="orderList"   border  style="width: 100%">
    <el-table-column
      type="index">
    </el-table-column>
    <el-table-column
      prop="order_number"
      label="订单编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="order_price"
      label="订单价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="order_fapiao_title"
      label="下单用户"
      width="120">
    </el-table-column>
    <el-table-column
      prop="pay_status"
      label="是否付款"
      width="120">
    </el-table-column>
    <el-table-column
      prop="is_send"
      label="是否发货"
      width="120">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="下单时间"
      width="120">
    </el-table-column>

    <el-table-column fixed="right"  label="操作"  width="100">
      <template slot-scope="scope">
          <el-button @click="handleClickOrder(scope.row)"  type="primary" icon="el-icon-edit" title="订单编辑"></el-button>
          <el-button  @click="handleClickFlow(scope.row)" type="warning" title="物流信息" icon="el-icon-location-outline"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

      <!-- 快递对话框 -->
          <el-dialog title="快递信息" :visible.sync="editDialogFormVisible" >
            <el-row :gutter="20" v-for="(item,index) in expressInfo" :key="index">
              <el-col :span="3"><div class="grid-content bg-purple">省/市/区</div></el-col>
              <el-col :span="7"><div class="grid-content bg-purple">{{item.name}}</div></el-col>
              <el-col :span="7"><div class="grid-content bg-purple">1</div></el-col>
              <el-col :span="7"><div class="grid-content bg-purple">1</div></el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editDialogFormVisible=false">取 消</el-button>
              <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
            </div>
             <!-- 地图 -->
            <el-amap vid="amap"></el-amap>
        </el-dialog>
       <!-- 修改地址对话框 -->
        <el-dialog>

        </el-dialog>
  </div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-amap/dist/index.js"></script>
<script>
import { getOrderList } from '@/api'
export default {
  data () {
    return {
      orderList: [],
      searchVal: '',
      total: 0, // 初始条数为0
      pagenum: 1, // 返回当前默认页面为1
      pagesize: 10, // 设置每页默认5条
      editDialogFormVisible: false, // 表格不可见
      expressInfo:[],//快递信息地区储存数组
      // id: this.scope.row.id,
      addressForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      expressInfo:[

      ],

      formLabelWidth: '120px'
    }
  },

  created () { // 调用初始化表格数据
    this.initOrderList()
  },
  methods: {
    initOrderList () {
      getOrderList({ query: this.query, pagenum: this.pagenum, pagesize: this.pagesize }).then(res => {
        console.log(res.data)
        this.orderList = res.data.goods
        this.total = res.data.total
        this.pagenum = res.data.pagenum
      })
    },
    searchOrder () { // 搜索功能缺陷
      console.log(this.searchVal)
      this.initOrderList()
      this.searchVal = ''
    },
    handleClickOrder (row) {
     this.editDialogFormVisible=true
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
    },
    // 快递物流信息
    handleClickFlow(){
      let _this=this;//将当前的物流信息保存起来
      console.log(this)
    }

  }
}
</script>
